<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            width: 3000px;
            height: 3000px;
        }
        button{
            position: fixed;
            bottom: 50px;
            right: 50px;
        }
    </style>
</head>
<body>
    <script>
        // 1.获取浏览器窗口尺寸
        // var w = window.innerWidth
        // var h = window.innerHeight
        // console.log(w,h)


        // 2.浏览器的弹出层

        // 提示框
        // window.alert('提示信息')

        // 询问框
        // var res = window.confirm('你爱我吗？')
        // 返回值：trun / false
        // console.log(res)

        // 输入框
        // var res = window.prompt('请输入密码')
        // // 返回值：输入内容
        // console.log(res)


        
    </script>
     <!-- 3.开启和关闭标签页
    <button id="on">开启</button>
    <button id="off">关闭</button>
    <script>
        on.onclick = function(){
            window.open('http://www.mobiletrain.org/')
        }
        off.onclick = function(){
            window.close()
        }
    </script> -->


    <!-- 4.资源加载完毕  页面所有资源加载完毕后执行-->
    <!-- <img src="../img/1 (12).jpeg" alt="">
    <script>
        window.onload = function(){
            console.log('资源已经加载完毕')
        }
    </script> -->


    <!-- 5.窗口尺寸改变事件 在可视窗口发生变化时触发-->
    <!-- <script>
        window.onresize = function(){
            console.log('窗口尺寸改变了')
        }
    </script> -->


    <!-- 6.滚动条位置改变事件 -->
    <!-- <script>
        window.onscroll = function(){
            console.log('滚动条位置改变了')
        }
    </script> -->


    <!-- 7.开启和关闭标签页 -->
    <!-- <a href="http://www.baidu.com">aaa</a>
    <button id="on">前进</button>
    <button id="off">后退</button>
    <script>
        on.onclick = function(){
            window.history.back()
        }
        off.onclick = function(){
            window.history.forward()
        }
    </script> -->


    <!-- 8.浏览器卷去的尺寸 -->
    <!-- <script>
        //卷去的高度
        // 1.有<!DOCTYPE html>时
        // window.onscroll = function(){
        //     console.log(document.documentElement.scrollTop)
        // }

        // 2.没有<!DOCTYPE html>时
        // window.onscroll = function(){
        //     console.log(document.body.scrollTop)
        // }

        // 3.兼容的写法
        // window.onscroll = function(){
        //     var height = document.documentElement.scrollTop || document.body.scrollTop
        //     console.log(height)
        // }
    </script> -->

    <!-- <script>
        //卷去的宽度
        // 1.有<!DOCTYPE html>时
        // window.onscroll = function(){
        //     console.log(document.documentElement.scrollLeft)
        // }

        // 2.没有<!DOCTYPE html>时
        // window.onscroll = function(){
        //     console.log(document.body.scrollLeft)
        // }

        // 3.兼容的写法
        // window.onscroll = function(){
        //     var width = document.documentElement.scrollLeft || document.body.scrollLeft
        //     console.log(width)
        // }
    </script> -->



    <!-- 9.浏览器滚动到（设置滚动条的位置） -->
    <!-- （1）只能瞬间定位，不能慢慢滚动到那个位置 -->
    <!-- <button id="go">走你</button>
    <script>
        go.onclick = function(){
            window.scrollTo(300,400)
        }
    </script> -->

    <!-- （2）可以慢慢滚动到那个位置  smooth平滑滚动-->
    <button id="go">走你</button>
    <script>
        go.onclick = function(){
            window.scrollTo({
                left:300,
                top:400,
                behavior:'smooth'
            })
        }
    </script>
</body>
</html>